<template>
  <div>
    <!--编辑区域-->
    <el-row type="flex" justify="space-around" style="margin-top: 30px">
      <el-col :span="3"></el-col>
      <!--中间编辑区-->
      <el-col :span="18">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <b>发布云记</b>
            <el-button style="float: right; padding: 3px 0" type="text">草稿箱</el-button>
          </div>
          <el-form :model="articleForm" :rules="articleFormRules" ref="articleFormRef" label-width="100px">
            <el-form-item class="articleForm" label="类别" label-width="100px" prop="category_id">
              <categories-cascader v-on:categoriesCallBack="categoryCall" />
            </el-form-item>
            <el-form-item class="articleForm" label="标题" label-width="100px" prop="title">
              <el-input v-model="articleForm.title"></el-input>
            </el-form-item>
            <el-form-item class="articleForm" label="自定义标签" label-width="140px" prop="tag">
              <el-select
                v-model="articleForm.tag"
                multiple
                filterable
                allow-create
                default-first-option
                placeholder="请选择或输入文章标签">
                <el-option
                  v-for="item in tagOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="articleForm" label="是否公开"  prop="is_public" label-width="130px">
              <el-switch active-color="#00c3ff" class="articleForm" v-model="articleForm.is_public"></el-switch>
            </el-form-item>
            <el-form-item label="是否独创" prop="is_creation" label-width="130px">
              <!--原创内容开关-->
              <el-switch
                v-model="articleForm.is_creation" @change="showreprint"
                active-color="#00c3ff" inactive-color="#cccccc"
                active-text="" inactive-text="">
              </el-switch>
              <span class="original-form-item-tip">启用即表示本内容为您独立创作，严禁转载抄袭</span>
            </el-form-item>
              <!--转载权限-->
              <div style="margin: 0 10px 10px 50px">
                <!--转载权限开关-->
                <el-radio-group v-model="articleForm.is_reprint" v-show="reprintVisible">
                  <el-radio-button border label="允许规范转载" :value="true" style="margin-right: 8px"></el-radio-button>
                  <el-radio-button border label="禁止规范转载" :value="true"
                                   style="margin-left: 8px;border-left: 1px solid #DCDFE6;"></el-radio-button>
                  <p class="original-form-item__tip">可对作品内容进行复制和转载，但需注明作品作者、出处</p>
                </el-radio-group>
              </div>
            <!--富文本编辑器-->
            <div class="tinymce-editor">
              <!--{{  articleForm.content }}-->
              <tinymce-editor v-model="articleForm.content"
                              :disabled="disabled"
                              @onClick="onClick"
                              v-on:addressLoad="loadAddress"
                              ref="editor"></tinymce-editor>
              <!--<button @click="clear">清空内容</button>-->
              <!--<button @click="disabled = true">禁用</button>-->
            </div>
            <div class="button-operator">
              <div style="display: flex;flex-direction: column;align-content: center;justify-content: space-around;align-items: center;margin-top: 10px">
                <el-form-item label-width="0" style="margin-bottom: 0;" :reles="articleFormRules" prop="accept">
                  <el-checkbox v-model="articleForm.accept" label="我已阅读并接受" border></el-checkbox>
                  <a href="./"></a>
                </el-form-item>
                <div>
                  <!--超链接-->
                  <el-link href="https://element.eleme.io" target="_blank">《云N记内容上传协议》</el-link>
                  <i v-if="!articleForm.accept" class="el-icon-error" style="color: red"></i>
                  <i v-else class="el-icon-success" style="color: #67C23A"></i>
                </div>
              </div>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">发布</el-button>
                <el-button>取消</el-button>
              </el-form-item>
            </div>
          </el-form>
        </el-card>
      </el-col>
      <el-col :span="3"></el-col>
    </el-row>
  </div>
</template>

<script>
import TinymceEditor from '../components/tinymceEditor'
import categoriesCascader from '../common/components/categoriesCascader'
export default {
  data () {
    return {
      // 是否禁用编辑器
      disabled: false,
      // 表单验证规则
      articleFormRules: {
        title: [
          { required: true, message: '请输入标题名称', trigger: 'blur' },
          { min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur' }],
        region: [
          { required: true, message: '请选择活动类型', trigger: 'change' }],
        accept: [
          { required: true, message: '请同意协议内容', trigger: 'blur' }
        ],
        category_id: [
          { required: true, message: '请选择种类', trigger: 'blur' }
        ],
        is_public: [
          { required: true, message: '请选择是否公开该笔记', trigger: 'blur' }
        ],
        tag: [
          { type: 'array', min: 0, max: 10, message: '长度在 0 到 10 个字符', trigger: 'blur' }
        ]
      },
      // 表单
      articleForm: {
        category_id: 0, // 种类
        title: '', // 标题
        is_creation: false, // 是否原创
        is_reprint: false, // 是否可转载
        tag: [], // 自定义标签
        accept: false, // 是否接受协议
        is_public: false, // 是否公开
        content: '' // 文章内容
      },
      // 显示转载权限
      reprintVisible: false,
      // 自定义标签配置项  初始化时获取热门自定义标签
      tagOptions: [{
        value: 'HTML',
        label: 'HTML'
      }, {
        value: 'CSS',
        label: 'CSS'
      }]
    }
  },
  created () {},
  // DOM对象加载完成时
  mounted () {
  },
  methods: {
    // 是否显示转载权限
    showreprint () {
      // console.log(this.articleForm.is_creation)
      // console.log(this.reprintVisible)
      this.reprintVisible = this.articleForm.is_creation === true
    },
    // 发布文章
    onSubmit () {
      this.$refs.articleFormRef.validate(async valid => {
        // 验证表单
        console.log(valid)
        console.log(this.articleForm)
        // 给传输数据的种类重新复制
        this.articleForm.category_id = this.articleForm.category_id[this.articleForm.category_id.length - 1]
        console.log(this.articleForm)
        if (!valid) return
        const url = this.$config.urls.get('public')
        const { data: res } = await this.$http.post(url, this.articleForm)
        if (res.code !== 0) {
          return this.$message.error('哎呀！出错了！')
        }
        this.$message.success('发布成功！')
        // 发布文章后加经验值
        this.getPublishExperience()
        await this.$router.push({ name: 'index' })
      })
    },
    // 获取发布文章经验
    getPublishExperience () {
      this.$memory.getUser().then(userString => {
        if (userString === null) {
          return
        }
        const user = JSON.parse(userString)
        // console.log(user)
        const id = user.id
        console.log(id)
        const url = this.$config.urls.get('publish_experience') + id
        this.$http.get(url).then(res => {
          if (res.data.code !== 0) {
            this.$message.warning(res.data.error_message)
          }
        })
      })
    },
    // 鼠标单击的事件
    onClick (e, editor) {
      // console.log('Element clicked')
      // console.log(e)
      // console.log(editor)
    },
    // 清空内容
    clear () {
      this.$refs.editor.clear()
    },
    // 接受来自子组件的省市区地址id们
    loadAddress (list) {
      if (list.length <= 0 || list.length > 3) {
        return this.$message.error('哎呀！出错了！')
      }
      this.articleForm.province_id = list[0]
      this.articleForm.city_id = list[1]
      this.articleForm.county_id = list[2]
    },
    categoryCall (list) {
      this.articleForm.category_id = parseInt(list[list.length - 1])
    }
  },
  components: { TinymceEditor, categoriesCascader },
  name: 'publishArticles'
}
</script>

<style lang="less" scoped>
.articleForm {
  width: 60%
}

.tinymce-editor {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.original-form-item-tip {
  font-size: 12px;
  color: #ccc;
}

.button-operator{
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: space-evenly;
  align-items: center;
}
</style>
